<template>
    <div>
        <!--<Card shadow>-->
            <Row>
                <Col span="12">
                    <Card style="width:400px;">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            新闻公告
                        </p>
                        <a href="#" slot="extra">
                            <Icon type="ios-loop-strong"></Icon>
                            Change
                        </a>
                        <ul class="my-ul">
                            <li class="my-li" v-for="item in backlogData">
                                <Icon type="md-alarm" style="color: darkorange"/>
                                {{item.event}} <span style="color: #8a8fa3">{{item.time}}</span>
                            </li>
                        </ul>
                    </Card>
                    <Card style="width:400px;">
                        <p slot="title">
                            <Icon type="ios-film-outline"></Icon>
                            我的待办
                        </p>
                        <a href="#" slot="extra">
                            <Icon type="ios-loop-strong"></Icon>
                            Change
                        </a>
                        <ul class="my-ul">
                            <li class="my-li" v-for="item in backlogData">
                                <Icon type="md-alarm" style="color: darkorange"/>
                                {{item.event}} <span style="color: #8a8fa3">{{item.time}}</span>
                            </li>
                        </ul>
                    </Card>
                </Col>
                <Col span="12">col-12</Col>
            </Row>
        <!--</Card>-->
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                backlogData: [
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                    {event:'报告编号JC202201000021待审核',time:'今天：9:00'},
                ]
            }
        }
    }
</script>

<style scoped>
    .my-ul {
        overflow-x: auto;
        height: 200px;
    }
    .my-li {
        list-style: none;
        margin: 5px 10px;
        color: black;
        line-height: 40px;
    }
</style>
